<!DOCTYPE>
<html ng-app="myApp">

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

    <title>Contact List App</title>
</head>

<body>
    <div class="container" ng-controller="AppCtrl">
        <h1>Contact List App</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number</th>
                    <th>Action</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="form-control" ng-model="contact.name"></td>
                    <td><input class="form-control" ng-model="contact.email"></td>
                    <td><input class="form-control" ng-model="contact.number"></td>
                    <td><button class="btn btn-primary" ng-click="addContact()">Add Contact</button></td>
                    <td><button class="btn btn-info" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
                </tr>
                <tr ng-repeat="c in contacts track by $index">
                    <td>{{c.name}}</td>
                    <td>{{c.email}}</td>
                    <td>{{c.number}}</td>
                    <td><button class="btn btn-danger" ng-click="remove(c._id)">Remove</button></td>
                    <td><button class="btn btn-warning" ng-click="edit(c._id)">Edit</button></td>
                </tr>
            </tbody>
        </table>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script src="/public/controllers/contactCtrl.js"></script>
</body>

</html>
